<template>
  <div class="">
    <div class="container1">
      <el-card class="mb-6">
        <span class="text-lg font-medium mb-3">模块简介：</span>
        <span class="text-gray-600 leading-relaxed mt-8">
          基于GPU，针对卷积神经网络法训练结果，开展独立数据集的预报结果检验，独立检验数据时间跨度不少于10个台风过程，检验该方法的台风预报精度，评估预报效果，并开展台风强度预报业务化运行。
        </span>
      </el-card>
      <el-card class="mb-6">
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium"
            >基于卷积神经网络的台风强度预报业务化运行程序</span
          >
          <div class="flex items-center space-x-4">
            <el-button
              :type="downloadStatus === 'running' ? 'danger' : 'primary'"
              class="!rounded-button whitespace-nowrap"
              size="small"
              @click="toggleDownload"
            >
              <i
                class="el-icon-video-play"
                v-if="downloadStatus !== 'running'"
              ></i>
              <i class="el-icon-video-pause" v-else></i>
              {{ downloadStatus === "running" ? "停止执行" : "开始执行" }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card
        class="flex flex-1 flex-col"
        :body-style="{
          height: '100%',
          width: '100%',
        }"
      >
        <div class="flex h-full flex-1">
          <div class="flex flex-1" v-if="!pdfLoadError">
            <div class="w-180 overflow-y-auto pr-2 border-r">
              <div
                v-for="page in numPages"
                :key="page"
                class="mb-2 cursor-pointer hover:bg-gray-100 p-1 rounded"
                :class="{ 'bg-blue-100': currentPage === page }"
                @click="currentPage = page"
              >
                <pdf
                  :src="proxyPdfUrl"
                  :page="page"
                  class="thumbnail-page"
                  scale="0.5"
                ></pdf>
              </div>
            </div>

            <div class="flex-1 flex flex-col ml-4">
              <div class="pdf-container bg-gray-100 overflow-auto">
                <pdf
                  :src="proxyPdfUrl"
                  class="pdf-viewer"
                  :page="currentPage"
                  @num-pages="numPages = $event"
                  @error="handlePdfError"
                  scale="0.5"
                ></pdf>
              </div>

              <div
                class="mt-4 flex items-center justify-center space-x-6 py-2 bg-gray-50"
              >
                <el-button
                  size="small"
                  :disabled="currentPage <= 1"
                  @click="currentPage--"
                >
                  上一页
                </el-button>

                <span class="text-sm text-gray-600">
                  第 {{ currentPage }} 页 / 共 {{ numPages }} 页
                </span>

                <el-button
                  size="small"
                  :disabled="currentPage >= numPages"
                  @click="currentPage++"
                >
                  下一页
                </el-button>
              </div>
            </div>
          </div>
          <div
            v-else
            class="flex flex-1 flex-col items-center justify-center space-y-4"
          >
            <img
              src="@/assets/images/PDF.png"
              class="w-132 h-132 opacity-50"
              alt="加载失败"
            />
            <div class="text-gray-500 text-center">
              <p class="font-medium">暂无文档预览</p>
              <el-button type="text" class="mt-2" @click="reloadPdf">
                重新加载
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  components: {
    pdf,
  },
  data() {
    return {
      downloadStatus: "stopped",
      pdfUrl: "https://www.gov.cn/zhengce/pdfFile/2023_PDF.pdf",
      proxyPdfUrl: "/pdf/zhengce/pdfFile/2023_PDF.pdf",
      currentPage: 1, // 新增当前页码
      numPages: 0, // 新增总页数
      pdfLoadError: false, // 新增加载错误状态
    };
  },
  methods: {
    toggleDownload() {
      this.downloadStatus =
        this.downloadStatus === "running" ? "stopped" : "running";
    },
    handlePdfError(err) {
      console.error("PDF加载失败:", err);
      this.pdfLoadError = true;
      this.$message.error("PDF加载失败，请检查文件路径或网络连接");
    },
    reloadPdf() {
      this.pdfLoadError = false;
      // 强制重新加载PDF（根据实际需要可选）
      this.proxyPdfUrl = Object.assign({}, this.proxyPdfUrl);
    },
  },
};
</script>

<style scoped>
/* 新增 PDF 容器层级控制 */
.container1 {
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.thumbnail-page {
  width: 100%;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pdf-container {
  flex: 1;
  min-height: 0;
  position: relative;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: auto;
}

.pdf-viewer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  transform: translate(50%, 0);
  width: 50%;
  height: 100%;
}

/* 新增样式，确保底部控件不会被挤出 */
.el-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 调整 PDF 容器的最大高度，给底部控件留出空间 */
.pdf-container {
  max-height: calc(
    100% - 40px
  ); /* 50px 是底部控件的大致高度，可根据实际情况调整 */
}
</style>
